<script setup lang="ts">
import logoPc from "~/assets/images/pc-logo.png";
import logoApp from "~/assets/images/app-logo.png";

import qrios from "~/assets/images/qrcode-ios.png";
import qrandroid from "~/assets/images/qrcode-android.png";

const { type } = defineProps<{
  type: string;
}>();

const map = {
  pc: {
    title: "PC客户端",
    logo: logoPc,
    platform: [
      {
        title: "Windows",
        content: "Windows V1.1.7",
        link: "https://static.smarbox.cn/cinmoore/download/cinmooreSetup.exe",
      },
    ],
  },
  app: {
    title: "APP",
    logo: logoApp,
    platform: [
      {
        title: "IOS",
        img: qrios,
      },
      {
        title: "Android",
        img: qrandroid,
      },
    ],
  },
};

// @ts-expect-error
const render = computed(() => map[type || "pc"]);

const tabActive = ref(0);
const plat = computed(() => render.value.platform[tabActive.value]);
</script>

<template>
  <div class="flex items-center mb-9">
    <img class="size-12 rounded mr-2" :src="render.logo" />
    <h3 class="text-2xl font-500">{{ render.title }}</h3>
  </div>

  <div class="">
    <div class="flex border-b border-b-#000/10">
      <span
        class="py-1.5  border-b-#000 -mb-1px font-500 mr-7 cursor-pointer font-500"
        v-for="(item, index) in render.platform"
        :key="index"
        @click="tabActive = index"
        :class="tabActive === index ? 'text-#242424 border-b' : 'text-#242424/50'"
      >
        {{ item.title }}
      </span>
    </div>

    <div class="mt-3 bg-#F5F5F5 py-4 px-6 flex justify-between">
      <template v-if="type == 'pc'">
        <span class="text-sm text-#242424">{{ plat.content }}</span>
        <a
          class="px-3 bg-#000 text-#fff rounded-full text-sm"
          :href="plat.link"
          target="_blank"
          download
          >下载
        </a>
      </template>

      <template v-else>
        <img class="size-15" :src="plat.img" />
      </template>
    </div>
  </div>
</template>
